<template>
  <div class="navList">
    <div class="navBody">
      <div class="logo">
        <span class="text">logo</span>
      </div>
      <div class="routerContainer">
        <!-- <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff" 
      active-text-color="#ffd04b">
      <el-submenu :class="$route.path.split('/')[1] === item.router? 'router-link-active':''" v-for="(item,index) in navData" :key="index" :to="{name:item.router}" v-if="!item.noShow ">
        <template slot="title">
          <router-link tag="div"  > -->
            <!-- <span class="text">{{item.name}}</span> -->
          <!-- </router-link>
        </template>
        <el-menu-item-group>
          <el-menu-item>
            <router-link tag="div"  v-for="(item,index) in navData[activeIndex].children" :key="index" :to="{name:item.router}">
          <span class="text">
            <i>{{item.name}}</i>
          </span>
        </router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu> -->
        <el-aside width="200px" class="homeMenu">

                    <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" router   background-color="rgb(42,93,127)" text-color="#ffffff" :default-openeds="openeds" >
                        <template v-for="(route, index) in $router.options.routes" v-if="!route.hidden" style="width: 200px;">
                            <template>
                                <el-submenu v-if="route.children" :key="index" :index="route.name">
                                    <template slot="title">
                                        <img :src="route.icon" alt="">
                                        <span slot="title" style="font-size: 18px;">{{route.name}}</span></template>
                                    <el-menu-item v-for="(cRoute, cIndex) in route.children"  :key="cIndex" :index="cRoute.name" :route="cRoute">
                                        <span slot="title" style="font-size: 16px;padding-left: 20px">{{cRoute.name}}</span>
                                    </el-menu-item>
                                </el-submenu>
                            </template>
                        </template>
                    </el-menu>
            </el-aside>

      </div>
      <div class="bottomText">
        欢迎登陆方寸后台管理系统
      </div>
    </div>
    <div class="navOther" v-if="navData[activeIndex].children">
      <div class="bar">{{navData[activeIndex].name}}</div>
      <div class="routerContainer">
        <router-link tag="div" class="routerTwo" v-for="(item,index) in navData[activeIndex].children" :key="index" :to="{name:item.router}">
          <!-- <span class="icon" v-if="item.icon">
            <i class="iconfont" :class="item.icon"></i>
            <i class="iconfont" :class="item.iconHover"></i>
          </span> -->
          <span class="text">
            <i>{{item.name}}</i>
          </span>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'navList',
  props: {
    navData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      isCollapse: true
    }
  },
  created () {
  },
  computed: {
    activeIndex () {
      for (let item of this.navData) {
        if (this.$route.path.indexOf(item.router) !== -1) {
          console.log(item)
          return this.navData.indexOf(item)
        }
      }
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../assets/stylus/variable'
.navList
  display flex
  width 100%
  height 100%
  .navBody
    flex 0 0 120px
    background #141A0F
    display flex
    flex-direction column
    .logo
      box-sizing border-box
      padding 10px 24px
      flex 0 0 53px
      box-sizing border-box
      .text
        margin 0 auto
        display inline-block
        width 92px
        height 33px
        text-align center
        line-height 33px
        background $bg-normal
        font-size $font-size-normal
        border-radius 4px
    .routerContainer
      flex 1
      .routerOne
        box-sizing border-box
        padding-left 16px
        height 40px
        width 100%
        display flex
        cursor pointer
        margin-bottom 8px
        &:hover
          background #125C30
        &.router-link-active
          background #156475
        // .icon
        // flex none
        // line-height 40px
        // .iconfont
        // font-size $font-size-big
        // color $bg-normal
        // vertical-align middle
        .text
          flex 1
          margin-left -10px
          line-height 40px
          text-align center
          font-size $font-size-normal
          color #FFFFFF
    .bottomText
      flex 0 0 48px
      line-height 48px
      text-align center
  .navOther
    flex 0 0 140px
    display flex
    flex-direction column
    background #EFF5EB
    .bar
      flex 0 0 48px
      line-height 48px
      text-align center
      font-size $font-size-normal
      box-sizing border-box
      font-weight bold
      background #FFFFFF
      // border-right 1px solid $color-border
      border-bottom 1px solid $color-border
    .routerContainer
      width 140px
      .routerTwo
        box-sizing border-box
        // padding-left 16px
        height 45px
        width 100%
        display flex
        cursor pointer
        margin-top 8px
        &.router-link-active
          background #ffffff
          color #68A33C
        .text
          flex 1
          margin-left 10px
          line-height 40px
          font-family PingFangSC-Regular
          font-size $font-size-normal
          color #444444
          i
            font-style normal
            // padding 8px 12px
            &:hover
              background #F5F7FA
        &.router-link-active
          .text
            i
              background #FFFFFF
              color #68A33C
</style>
